<template>
    <div>
        <textarea :id="id" :value="value"></textarea>
    </div>
</template>

<script>
// Import TinyMCE
// tinymce的配置信息 参考官方文档 https://www.tinymce.com/docs/configure/integration-and-setup/
// import tinymce from 'tinymce/tinymce'
// import 'tinymce/themes/modern/theme'
// import 'tinymce/plugins/advlist'
// import 'tinymce/plugins/autolink'
// import 'tinymce/plugins/lists'
// import 'tinymce/plugins/link'
// import 'tinymce/plugins/image'
// import 'tinymce/plugins/charmap'
// import 'tinymce/plugins/print'
// import 'tinymce/plugins/preview'
// import 'tinymce/plugins/anchor'
// import 'tinymce/plugins/textcolor'

// import 'tinymce/plugins/searchreplace'
// import 'tinymce/plugins/visualblocks'
// import 'tinymce/plugins/code'
// import 'tinymce/plugins/fullscreen'

// import 'tinymce/plugins/insertdatetime'
// import 'tinymce/plugins/table'
// import 'tinymce/plugins/contextmenu'
// import 'tinymce/plugins/paste'
// import 'tinymce/plugins/code'
// import 'tinymce/plugins/wordcount'
import "common/src/components/tinymce/langs/zh_CN";
import "common/src/components/tinymce/skins/lightgray/skin.min.css";
const INIT = 0;
const CHANGED = 2;
var EDITOR = null;
export default {
    props: {
        value: {
            type: String,
            required: true
        },
        setting: {}
    },
    data: function() {
        return {
            status: INIT,
            id: "editor-" + new Date().getMilliseconds()
        };
    },
    watch: {
        value: function(val) {
            if (
                this.status == INIT ||
                tinymce.activeEditor.getContent() != val
            ) {
                tinymce.activeEditor.setContent(val);
            }
            this.status = CHANGED;
        }
    },
    mounted() {
        const _this = this;
        const setting = {
            selector: "#" + _this.id,
            language_url: 'common/src/components/tinymce/langs/zh_CN.js',
            language: "zh_CN",
            init_instance_callback: function(editor) {
                EDITOR = editor;
                editor.on("input change undo redo paste", e => {
                    var content = tinymce.activeEditor.getContent() || "";
                    if (_this.isIEBrowser() !== "IE") {
                        if (e.clipboardData) {
                            var items = e.clipboardData.items;
                            var content =
                                tinymce.activeEditor.getContent() || "";
                            for (var i = 0; i < items.length; i++) {
                                var item = items[i];
                                if (item.kind === "file") {
                                    var pasteFile = item.getAsFile();
                                    var reader = new FileReader();
                                    reader.onload = function(event) {
                                        var base64Img = event.target.result;
                                        content +=
                                            "<p>" +
                                            "<img src=" +
                                            event.target.result +
                                            ">" +
                                            "</p>";
                                        _this.$emit("input", content);
                                    };
                                    reader.readAsDataURL(pasteFile);
                                }
                            }
                        }
                    }
                    _this.$emit("input", content);
                });
            },
            theme: "modern",
            plugins: [
                //'advlist autolink lists link image charmap print preview anchor textcolor',
                //'searchreplace visualblocks code fullscreen',
                //'insertdatetime table contextmenu paste code wordcount'
            ],
            // plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu paste visualblocks',
            toolbar: "",
            //'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat paste',

            image_title: true,
            automatic_uploads: true,
            file_picker_types: "image",
            file_picker_callback: function(cb, value, meta) {
                var input = document.createElement("input");
                input.setAttribute("type", "file");
                input.setAttribute("accept", "image/*");

                // Note: In modern browsers input[type="file"] is functional without
                // even adding it to the DOM, but that might not be the case in some older
                // or quirky browsers like IE, so you might want to add it to the DOM
                // just in case, and visually hide it. And do not forget do remove it
                // once you do not need it anymore.

                input.onchange = function() {
                    var file = this.files[0];

                    var reader = new FileReader();
                    reader.onload = function() {
                        // Note: Now we need to register the blob in TinyMCEs image blob
                        // registry. In the next release this part hopefully won't be
                        // necessary, as we are looking to handle it internally.
                        var id = "blobid" + new Date().getTime();
                        var blobCache =
                            tinymce.activeEditor.editorUpload.blobCache;
                        var base64 = reader.result.split(",")[1];
                        var blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);

                        // call the callback and populate the Title field with the file name
                        cb(blobInfo.blobUri(), { title: file.name });
                    };
                    reader.readAsDataURL(file);
                };

                input.click();
            }
        };
        Object.assign(setting, _this.setting);

        tinymce.init(setting);
    },
    beforeDestroy: function() {
        if (tinymce.get(this.id)) tinymce.get(this.id).destroy();
    },
    methods: {
        isIEBrowser() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1;
            //判断是否Opera浏览器
            if (isOpera) {
                return "Opera";
            }
            //判断是否Firefox浏览器
            if (userAgent.indexOf("Firefox") > -1) {
                return "FF";
            }
            //判断是否chorme浏览器
            if (userAgent.indexOf("Chrome") > -1) {
                return "Chrome";
            }
            //判断是否Safari浏览器
            if (userAgent.indexOf("Safari") > -1) {
                return "Safari";
            }
            //判断是否IE浏览器
            if (
                userAgent.indexOf("compatible") > -1 &&
                userAgent.indexOf("MSIE") > -1 &&
                !isOpera
            ) {
                return "IE";
            }
            //判断是否Edge浏览器
            if (userAgent.indexOf("Trident") > -1) {
                return "Edge";
            }
        }
    }
};
</script>
<style>
#mceu_27 {
    display: none;
}
</style>
